import React, { PureComponent } from 'react';
import { formatMessage, setLocale, getLocale } from 'umi';
import { GlobalOutlined } from '@ant-design/icons';
import { Menu, Dropdown } from 'antd';

class SelectLang extends PureComponent {
  render() {
    const {
      className,
      style,
      langs = [
        { key: 'zh-CN', value: '简体中文' },
        { key: 'en-US', value: 'English' },
      ],
      // eslint-disable-next-line
      onSelect = (key, resolve, reject) => {
        resolve();
      },
    } = this.props;

    const menuItems = langs.map((item) => <Menu.Item key={item.key}>{item.value}</Menu.Item>);

    return (
      <Dropdown
        placement="bottomCenter"
        overlay={(() => (
          <Menu
            selectedKeys={[getLocale()]}
            onClick={({ key }) => {
              new Promise((resolve, reject) => {
                onSelect(key, resolve, reject);
              }).then(() => {
                setLocale(key);
              });
            }}
          >
            {menuItems}
          </Menu>
        ))()}
      >
        <span className={className} style={style} title={formatMessage({ id: '语言' })}>
          <GlobalOutlined />
          <span style={{ position: 'relative', top: 0, marginLeft: 6 }}>
            {formatMessage({ id: '语言' })}
          </span>
        </span>
      </Dropdown>
    );
  }
}

export default SelectLang;
